<template>
  <el-container>
    <el-header>
      <el-card style="background: paleturquoise">
        我的购物车,
        <el-button type="text" @click="goback()" align="right">返回商城首页</el-button>
      </el-card>
    </el-header>
    <el-main>
      <el-table
          :data="tableData"
          style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="pic"
            label="图片"
            width="180">
          <template slot-scope="scope">
            <img :src="scope.row.pic" width="80px" height="80px" alt="暂无图片">
          </template>
        </el-table-column>
        <el-table-column
            prop="gname"
            label="商品名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="price"
            label="商品单价"
            width="180">
        </el-table-column>
        <el-table-column
            width="180">
        </el-table-column>
        <el-table-column
            prop="gnumber"
            label="数量">
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.gnumber" @change="handleChange(scope.row)" :min="1" :max="10" label="描述文字"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
            prop="subtotal"
            label="小计">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
              <el-button slot="reference" size="mini"  @click="submitall(scope.row)">确定</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)">移除购物车</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer>
      <el-card style="background: paleturquoise">
        总价:<i style="color:red">{{cartsum}}</i>元
        <span>
          <el-button type="danger" @click="getcartfordeta()" round>结算</el-button>
        </span>
      </el-card>
    </el-footer>
  </el-container>
</template>


<script>
export default {
  data() {
    return {
      tableData: [],
      num: 1,
      cartform:{},
      subtotal:0,
      cartsum:0,
      cartlist:[],
    }
  },
  methods:{
    handleChange(value) {
      console.log("vvvvvvvvvvvvvvvvvvvv",value);
      value.subtotal=value.gnumber*value.price;

    },
    getcart(){
      this.axios.get("http://localhost:9999/cart/getcart").then((res)=>{
        console.log("resssssssssssssssssssssss----",res);
        if (res){
          this.tableData=res.data.data;
        }
      })
    },
    handleSelectionChange(val) {
      console.log("valllllllllllllllllllllllllllllll",val);
      var sums = 0;
      val.forEach((item)=>{
        sums+=item.subtotal;
      })
      this.cartsum=sums;
      this.cartlist=val;
      localStorage.setItem("cartlist",JSON.stringify(this.cartlist));
      localStorage.setItem("cartsum",this.cartsum);
    },
    submitall(row){
      this.cartform={
        cid:row.cid,
        uid:row.uid,
        gid:row.gid,
        gnumber:row.gnumber,
        price:row.price,
        gname:row.gname,
        pic:row.pic,
        subtotal:row.subtotal,
      };
      this.axios.post("http://localhost:9999/cart/postcart",this.cartform).then((res)=>{
        console.log("resrrrrrrrrrrrrrrrrrrrrrrrrrrr",res);
        if (res){
          this.$message.success("保存成功");
        }
      })
    },
    getcartfordeta(){
      this.$router.push({path:"/detail"});


    },
    handleDelete(row){
      this.axios.post("http://localhost:9999/cart/delcart",row).then((res)=>{
        if (res){
          this.$message.error("移除购物车成功!");
          this.getcart();
        }
      })
    },
    goback(){
      this.$router.push({path:"/"});
    }
  },
  created() {
    this.getcart();
  }
}
</script>




